<template>
  <div class="app-container">
    <!-- <span class="title">个人申请与审核</span>
    <el-divider></el-divider> -->
    <div class="filter-container">
      <el-form inline>
        <el-form-item label="项目编号">
          <el-input v-model="listQuery.number" placeholder="项目编号" />
        </el-form-item>
        <el-form-item label="项目名称">
          <el-input v-model="listQuery.name" placeholder="项目名称" />
        </el-form-item>
        <el-form-item label="项目类型">
          <el-select clearable placeholder="项目类型" v-model="listQuery.type">
            <el-option
              v-for="(item,index) in typeList"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="阶段库">
          <el-select placeholder="阶段库" v-model="listQuery.stageStore" clearable>
            <el-option v-for="(item,index) in jieduankuList" :key="index" :label="item.linkName" :value="item.stageStore" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属区县">
          <el-select placeholder="所属区县" v-model="listQuery.district" clearable>
            <el-option v-for="(item,index) in quxianList" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="状态">
          <el-select placeholder="状态" v-model="listQuery.status" clearable>
            <el-option v-for="(item,index) in statusList" :key="index" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button @click="changePage(1)" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
      <el-form inline>
        <el-form-item>
          <el-button :loading="btnListLoading">项目{{tongjiCount}}个，总面积{{tongjiArea}}公顷</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table v-loading="listLoading" :data="list" element-loading-text="加载中" highlight-current-row>
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column show-overflow-tooltip prop="number" label="业务编号"></el-table-column>
      <el-table-column show-overflow-tooltip prop="name" label="项目名称"></el-table-column>
      <el-table-column show-overflow-tooltip label="项目类型">
        <template slot-scope="scope">
          <p>{{scope.row.typeName}}</p>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="district" label="区县"></el-table-column>
      <el-table-column show-overflow-tooltip prop="level" label="项目级别"></el-table-column>
      <el-table-column show-overflow-tooltip prop="scale" label="项目面积(公顷)"></el-table-column>
      <el-table-column show-overflow-tooltip prop="investment" label="投资规模"></el-table-column>
      <!-- <el-table-column show-overflow-tooltip prop="link" label="所在环节" width="300"></el-table-column> -->
      <!-- <el-table-column label="流程信息" width="120">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="seeLiucheng(scope.row)">查看</el-button>
        </template>
      </el-table-column> -->
      <el-table-column label="业务信息" width="120">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="toSee(scope.row)">查看</el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column label="地图浏览" width="120">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="coding">查看</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <div class="pagination-container">
      <el-pagination @current-change="changePage" :page-size="listQuery.size" layout="prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      :append-to-body="false"
      width="50%"
      title="已办流程"
      :visible.sync="dialog"
    >
      <el-timeline v-show="optionList.length!=0">
        <el-timeline-item v-for="(item,index) in optionList" :key="index" :icon="item.icon" :type="item.type" :color="item.color" placement="top">
          <div class="shenheTitle">
            {{item.linkName}}
          </div>
          <el-card class="cardItem">
            <div class="shenheBox">
              <div class="shenheBoxTop">
                <div class="shenheBoxTop_left">
                  <div class="shenheText">
                    <i style="color: #67C23A;font-size:18px;margin-right:5px;" class="el-icon-success"></i>
                    <!-- <i style="color: #f56c6c;font-size:18px;margin-right:5px;" class="el-icon-circle-close" v-if="item.auditResult=='REJECTED'"></i> -->
                    <span>审查通过</span>
                  </div>
                  <div class="shenheBoxTop_people" style="margin-left:70px;">
                    <p style="font-size:14px;color:#b0b0b0;">审查人</p>
                    <p style="font-size:14px;margin-left:7px;">
                      <img :src="$https+item.path" width="105px" height="59px" />
                    </p>
                  </div>
                </div>
                <div style="color:#a396a3;" class="shenheBoxTop_right">
                  {{item.time}}
                </div>
              </div>
              <div class="shenheBoxBottom">
                <!-- <p style="margin-right:5px;">经办意见：</p> -->
                <p>
                  {{item.opinion == null?'无':item.opinion}}
                </p>
              </div>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <div class="no-data" v-if="optionList.length==0">
        暂无数据
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAllDownList,getDistList,getMyDownListType,getAllServiceStage,getWhereTheLink,flowTree,stageStoreList,getProjectListByStageStore,getTypeList,queryProjectCountByStageStore } from "@/api/tongji";
import config, { handleTwoPhaseJumpRoute, handleThreePhaseJumpRoute } from "@/config";
export default {
  filters: {},
  data() {
    return {
      optionList:[],
      dialog:false,
      userInfo: "",
      list: null,
      total: null,
      listLoading: false,
      btnListLoading: false,
      listQuery: {
        number: "",
        name: "",
        status: '',
        district: '',
        link: "",
        stageStore:'',
        type: '',
        page: 1,
        rows: 10
      },
      shenChaList:[], //审查类型列表
      fukenList:[], //复垦类型列表
      jieduanList:[], //阶段列表
      statusList:[
        {name:'在办项目',code:0},
        {name:'已办项目',code:1}
      ],
      quxianList:[], //区县列表
      typeList:[], //所有项目类型列表
      huanjieList:[], //所有环节列表
      jieduankuList:[], //阶段库列表
      tongjiCount:0,
      tongjiArea:0,
    };
  },
  created(){
    this.userInfo = this.$store.state.user.userInfo;
  },
  mounted() {
    
    this.fetchData()
    // this.getJieduan()
    this.getAreaData()
    this.getTypeList()
    // this.getHuanjie()
    this.getJieduanku()
    // this.getJieduantongji()
  },
  methods: {
    //获取阶段库统计
    // getJieduantongji(){
    //   var data={}
    //   queryProjectCountByStageStore(data).then(res =>{
    //     console.log(res,"统计数据")
    //     if(res.data){
    //       this.tongjiCount = res.data.count
    //       this.tongjiArea = res.data.area
    //     }
    //   })
    // },
    //获取阶段库列表
    getJieduanku(){
      stageStoreList().then(res =>{
        console.log(res,"阶段库列表")
        this.jieduankuList = res.data
      })
    },
    seeLiucheng(row){
      var data={
        projectId:row.id
      }
      flowTree(data).then(res =>{
        console.log(res,"流程信息")
        this.optionList = res.data
        this.dialog = true
      })
    },
    coding(){
      this.$alert("正在开发中..", "提示", {
        confirmButtonText: "确定",
        callback: action => {}
      });
    },
    toSee(row){
      this.handleYwdeal_three(row,2)
      // if(row.type == 1){
      //   this.handleYwdeal_tow(row,2)
      // }else if(row.type == 2){
        
      // }
    },
    handleYwdeal_tow(row, num) {
      localStorage.setItem("lookStatus", num);
      localStorage.setItem("router", row.key);
      if (this.userInfo.roleList.length > 0) {
        localStorage.setItem("menusName", this.userInfo.roleList[0].code);
      } else {
        this.$alert("暂无权限", "提示", {
          confirmButtonText: "确定",
          callback: action => {
            this.$router.push("/login");
          }
        });
      }
      localStorage.setItem("userId", this.userInfo.userId);
      localStorage.setItem("projectId", row.id);
      localStorage.setItem("projectName", row.name);
      handleTwoPhaseJumpRoute();
    },
    handleYwdeal_three(row) {
      localStorage.setItem("router", row.key);
      if (this.userInfo.roleList.length > 0) {
        localStorage.setItem("menusName", this.userInfo.roleList[0].code);
      } else {
        this.$alert("暂无权限", "提示", {
          confirmButtonText: "确定",
          callback: action => {
            this.$router.push("/login");
          }
        });
      }
      localStorage.setItem("userId", this.userInfo.userId);
      localStorage.setItem("projectId", row.id);
      localStorage.setItem("projectName", row.name);
      localStorage.setItem("key", row.key);
      handleThreePhaseJumpRoute();
    },
    //获取项目所在环节列表
    getHuanjie(){
      var data={
        type:this.listQuery.type,
        stage:this.listQuery.stage
      }
      getWhereTheLink(data).then(res =>{
        if(res.data){
          this.huanjieList = res.data
        }else{
          this.huanjieList = []
          this.listQuery.link = ''
        }
      })
    },
    //选择项目类型
    selectProjectType(val){
      this.getHuanjie()
    },
    //选择项目阶段
    selectProjectStage(val){
      this.getHuanjie()
    },
    //获取所有项目类型
    getTypeList(){
      getTypeList().then(res =>{
        this.typeList = res.data
      })
    },
    //获取所有阶段
    getJieduan(){
      getAllServiceStage().then(res =>{
        this.jieduanList = res.data
      })
    },
    //获取所有区县
    getAreaData(){
      getDistList().then(res =>{
        this.quxianList = res.data
      })
    },
    //获取复垦类型列表
    fetchData() {
      this.listLoading = true;
      this.btnListLoading = true;
      var data={}
      var objArr=this.listQuery
      for (var index in objArr) {
        if(objArr[index]!==''&&objArr[index]!=null){
          data[index]=objArr[index];
        }
      }
      getProjectListByStageStore(data)
        .then(res => {
          this.listLoading = false;
          this.list = res.data.list;
          this.total = res.data.total;
        })
        .catch(err => {
          this.listLoading = false;
        });
      queryProjectCountByStageStore(data).then(res =>{
        this.btnListLoading = false;
        console.log(res,"统计数据")
        if(res.data){
          this.tongjiCount = res.data.count
          this.tongjiArea = res.data.area
        }
      })
    },
    changePage(page) {
      this.listQuery.page = page;
      this.fetchData();
    }
  }
};
</script>

<style lang="scss" scoped>
.shenheTitle{
  margin-bottom: 15px;
}
/deep/ .el-timeline-item__timestamp.is-top{
  margin-bottom: 1px;
}
/deep/ .el-card__body{
  padding: 6px 20px 10px;
}
.cardItem{
  width: 75%;
}
.shenheBox{
  width: 100%;
  .shenheBoxTop{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .shenheBoxTop_left{
      display: flex;
      align-items: center;
      .shenheText{
        display: flex;
        align-items: center;
      }
      .shenheBoxTop_people{
        display: flex;
        align-items: center;
      }
    }
  }
  .shenheBoxBottom{
    width: 100%;
    overflow: hidden;
    background-color: #f1f1f1;
    box-sizing: border-box;
    padding: 15px 25px;
    border-radius: 5px;
    p{
      font-size: 14px;
      margin: 0;
      float: left;
    }
    p:first-child{
      width: 80px;
      color:#969696;
    }
    p:last-child{
      width: calc(100% - 90px)
    }
  }
}

</style>